<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>问卷小精灵</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">

	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<script src="jquery.min.js"></script>

	<link rel="stylesheet" href="./element/element.css">
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="./element/element.js"></script>
	<script type="text/javascript" src="request.js"></script>
	<!-- import CSS -->
	<!-- import JavaScript -->
	<!-- <script src="https://unpkg.com/mint-ui/lib/index.js"></script> -->
	<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->

	<style>
		body {
			margin: 0px;
		}

		.header {
			text-align: center;
		}

		.content {
			padding: 2%;
		}

		.item {
			padding: 3%;
			border: 1px solid #adadad;
			border-radius: 10px;
			margin-bottom: 3%;
		}

		#survey {}

		.done {
			position: fixed;
			bottom: 0px;
			height: 3rem;
			background-color: #409eff;
			width: 100%;
			line-height: 3rem;
			text-align: center;
			color: #fff;
		}

		.el-message-box {
			width: 15rem;
		}

		.el-message {
			min-width: 1rem;
		}
		.el-input__inner{
			width: 80%;
		}
		.logo{
			text-align: center;
			margin-top: 15%;
			color: #409eff;
		}
		.logo i{
			font-size: 50px;
		}
	</style>

</head>

<body>

	<div id="survey">
		<div class="logo">
			<i class="el-icon-document-copy"></i>
			<h2>
				问卷小精灵
			</h2>
		</div>

		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

			<el-form-item label="用户名" prop="username">
				<el-input v-model.number="ruleForm.username" size="mini"></el-input>
			</el-form-item>

			<el-form-item label="密码" prop="pass">
				<el-input type="password" v-model="ruleForm.pass" autocomplete="off" size="mini"></el-input>
			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>


</body>


</html>
<script>


	survey = new Vue({
		el: "#survey",
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					// if (this.ruleForm.pass !== '') {
					// 	this.$refs.ruleForm.validateField('pass');
					// }
					callback();
				}
			};
			var validateUsername = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入用户名'));
				} else {
					// if (this.ruleForm.username !== '') {
					// 	this.$refs.ruleForm.validateField('validateUsername');
					// }
					callback();
				}
			};
			return {
				ruleForm: {
					pass: '',
					username: ''
				},
				rules: {
					pass: [
						{ validator: validatePass, trigger: 'blur' }
					],
					username: [
						{ validator: validateUsername, trigger: 'blur' }
					]
				}
			};
		},

		computed: {
			cur_time() {
				var d = new Date();
				return (d.getMonth() + 1) + '月' + d.getDate() + '日  ' + d.getHours() + ':' + d.getMinutes();
			}
		},
		mounted: function () {
			this.init();
			this.$nextTick(function () {

			})
		},

		methods: {
			init() {

			},
			submitForm(formName) {
				var that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						debugger;

						if (that.ruleForm.username == 'test' && that.ruleForm.pass == 'test') {
							location.href = 'onlineSurvey_fill.html';
						}
						else if (that.ruleForm.username == 'admin' && that.ruleForm.pass == 'admin') {
							location.href = 'onlineSurvey_list.html';
						}
						else {
							that.$message.error({
								message: '账号或用户名有误',
								duration: '40000'
							});
						}


					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			add_code(item) {
				this.code += $.trim($("#" + item.id).html().replace(/\#/, this.handler_value_name)) + "\n";

				this.$nextTick(function () {

				})

			},
			del_item(item, index) {
				item.splice(index, 1);

			},


			toggel_hot_use(item) {
				debugger;

				this.hot_use_list = item.hot.split(",");

			},
			assign_value(item) {
				this.handler_value_name = item;


			},
		}
	});



</script>